<template>
  <DialogBase>
    <div class="dobooks-container">
      <audio id="myAudio" src="/click2.mp3"></audio>
      <audio id="CA" autoplay src="/CA.mp3"></audio>
      <div class="dobooks-left">
        <div class="dobooks-left-img">
          <img src="../assets/BB/furong.png" alt="" />
        </div>
        <div class="dobooks-left-info">
          <div class="dobooks-left-info-txt">{{ store.currentBb.des }}</div>
          <div class="dobooks-left-info-btn" @click="selectBbEvent" v-if="store.items.length > 1">切换</div>
        </div>
        <div class="dobooks-left-attrs">
          <div class="dobooks-left-attrs-lib">攻击资质：{{ bbAttsMap.gongji }}</div>
          <div class="dobooks-left-attrs-lib">法力资质：{{ bbAttsMap.fali }}</div>
          <div class="dobooks-left-attrs-lib">防御资质：{{ bbAttsMap.fangyu }}</div>
          <div class="dobooks-left-attrs-lib">速度资质：{{ bbAttsMap.sudu }}</div>
          <div class="dobooks-left-attrs-lib">体力资质：{{ bbAttsMap.tili }}</div>
          <div class="dobooks-left-attrs-lib">躲闪资质：{{ bbAttsMap.duoshan }}</div>
          <div class="dobooks-left-attrs-lib hot">寿 命：{{ bbAttsMap.shouming }}</div>
          <div class="dobooks-left-attrs-lib hot">成 长：{{ bbAttsMap.chengzhang }}</div>
          <div class="dobooks-left-attrs-lib hot">五 行：{{ bbAttsMap.wuxing }}</div>
        </div>
        <div class="dobooks-left-jn">
          <div class="dobooks-left-jn-lib" v-for="(it, index) in jnLists" :key="index">
            <img :class="[index === learnIndexRef && learningRef && 'learning']" v-if="it?.img" :src="it.img" alt="" />
          </div>
          <div class="dobooks-left-jn-btn" @click="resetEvent">重置</div>
          <div class="dobooks-left-jn-btn" v-if="showRenzheng" @click="renzhengEvent">认证</div>
          <div class="dobooks-left-jn-btn" @click="saveEvent">保存</div>
          <div class="dobooks-left-jn-btn _hot add" @click="addEvent">添加</div>
          <div class="dobooks-left-jn-btn _hot clear" @click="clearEvent">清除</div>
          <div class="dobooks-left-jn-btn _hot audio" @click="musicEvent">{{ bgMusicFlag ? '暂停' : '播放' }}</div>
        </div>
      </div>
      <div class="dobooks-right">
        <div class="dobooks-right-learn">
          <div class="dobooks-right-learn-shoujue">
            <img v-if="currentSelect?.img" :src="currentSelect.img" alt="" />
            <!-- {{ currentSelect.img }} -->
          </div>
          <div class="dobooks-right-learn-btn">
            <div class="dobooks-right-learn-btn-txt">请放入魔兽要诀或者高级魔兽要诀</div>
            <div class="dobooks-right-learn-btn-b" @click="learnEvent">学习</div>
          </div>
        </div>
        <div class="dobooks-right-bags">
          <div
            class="dobooks-right-bags-lib"
            v-for="(it, index) in bagJnLists"
            :key="'bag_' + index"
            @click="bagSelectEvent(it)"
          >
            <img v-if="it?.img" src="/shoujue.jpg" alt="" />
            <div class="dobooks-right-bags-lib-des">{{ it.des }}</div>
          </div>
        </div>
        <div class="dobooks-right-des">
          说明 <br />
          隨兽要诀能赋予召唤兽某种技能，但是每次使 内 丹
          用的同时会消除该召唤兽的一项原有技能，技能数量≤2的召唤兽有一定几率不会 有 技能。
        </div>
      </div>
    </div>
  </DialogBase>
</template>

<script setup>
import DialogBase from './DialogBase.vue'
import { shallowReactive, reactive, onMounted, ref, watch } from 'vue'
import { jnSourceLists } from '../constants/constants'
import { getRandomItem, getDifferArrayRandomItem, getRandomFixedLengthArray } from '.././utils/utils'
import { useBbListStore } from '../store'
import { showModal } from '@/utils/modal'
import { showNotice } from '@/utils/notice'
const store = useBbListStore()

const bbAttsMap = reactive({
  gongji: '',
  fali: '',
  fangyu: '',
  sudu: '',
  tili: '',
  duoshan: '',
  shouming: '',
  chengzhang: '',
  wuxing: '',
})
let currentSelect = reactive({
  des: '',
  img: '111',
  name: '',
})
let jnLenthRef = ref(0)
let learnIndexRef = ref(0)
let learningRef = ref(false)
let showRenzheng = ref(false)
let bgMusicFlag = ref(false)
let jnLists = reactive(new Array(12))
// const bagLists = shallowReactive(new Array(16))
const bagJnLists = shallowReactive(jnSourceLists)
const getRandomAttrs = () => {
  bbAttsMap.gongji = 1000 + parseInt(Math.random() * 700)
  bbAttsMap.fali = 1000 + parseInt(Math.random() * 2000)
  bbAttsMap.fangyu = 1000 + parseInt(Math.random() * 1000)
  bbAttsMap.sudu = 1000 + parseInt(Math.random() * 700)
  bbAttsMap.tili = 1000 + parseInt(Math.random() * 4000)
  bbAttsMap.duoshan = 1000 + parseInt(Math.random() * 700)
  bbAttsMap.shouming = 1000 + parseInt(Math.random() * 7000)
  bbAttsMap.chengzhang = (1 + parseFloat(Math.random().toFixed(2) * 0.3)).toFixed(2)
  bbAttsMap.wuxing = getRandomItem(['金', '木', '水', '火', '土'])
  //初始化技能
  jnLists = new Array(12)
  const jnLenth = 3 + Math.floor(Math.random() * 8)
  jnLenthRef.value = jnLenth
  // console.log('初始化技能长度：', jnLenth)
  const jnInitArrs = getRandomFixedLengthArray(jnSourceLists, jnLenth)
  jnInitArrs.forEach((e, index) => {
    jnLists[index] = {
      ...jnLists[index],
      ...e,
    }
  })
  controlRenzheng()

  console.log('初始化技能:', jnLenth, Array.from(jnLists))
}
const controlRenzheng = () => {
  showRenzheng.value = Array.from(jnLists).some((e) => {
    const result = ['diyuliehuo', 'shuimanjinshan', 'taishanyading', 'benleizhou'].includes(e?.name)
    console.log('___result', result)
    return result
  })
}
const bagSelectEvent = (it) => {
  console.log('___', it)
  currentSelect = Object.assign(currentSelect, it)
  console.log('___111', currentSelect)
}
function playAudio() {
  var audio = document.getElementById('myAudio')
  audio
    .play()
    .then(() => {
      setTimeout(function () {
        audio.pause()
        audio.currentTime = 0 // 重置当前播放时间为0，如果需要重新播放可以从头开始
      }, 1000) // 1秒后停止播放
    })
    .catch((error) => {
      console.error('播放失败:', error)
    })
}
const learnEvent = () => {
  if (!currentSelect.des) {
    showModal({
      title: '提示',
      subtitle: `请先选择要学习的技能书！`,
    })
    return
  }
  const exists = jnLists.some((e) => {
    return e?.des === currentSelect.des
  })
  if (exists) {
    showModal({
      title: '提示',
      subtitle: `${currentSelect.des}技能已重复！`,
    })
    return
  }
  playAudio()
  // 找到第一个空技能格或随机替换一个已有技能
  let targetIndex = Math.floor(Math.random() * jnLenthRef.value)
  console.log('学习技能顶替位置：', targetIndex)
  showNotice({
    msg: `你打掉了${jnLists[targetIndex].des}`,
  })
  // jnLists[0] = Object.assign(jnLists[targetIndex], currentSelect)
  // 确保响应式更新 - 创建新对象替换原对象
  const newSkill = {
    ...currentSelect,
    animated: true,
  }
  jnLists.splice(targetIndex, 1, newSkill)
  // 清空当前选择
  Object.assign(currentSelect, {
    des: '',
    img: '',
    name: '',
  })
  learnIndexRef.value = targetIndex
  learningRef.value = true
  setTimeout(() => {
    learningRef.value = false
  }, 1000)
  controlRenzheng()
}
const resetEvent = () => {
  getRandomAttrs()
}
const selectBbEvent = () => {
  if (store.index >= store.items.length - 1) {
    store.index = 0
  } else {
    store.index++
  }
}
const renzhengEvent = () => {
  console.log('rz')
  showRenzheng.value = Array.from(jnLists).forEach((e, i) => {
    if (['diyuliehuo', 'shuimanjinshan', 'taishanyading', 'benleizhou'].includes(e?.name)) {
      jnLists.splice(jnLists.length - 1, 1, e)
      console.log('xxxxx', getDifferArrayRandomItem(jnSourceLists, jnLists))
      jnLists.splice(i, 1, getDifferArrayRandomItem(jnSourceLists, jnLists))
    }
  })
}
const saveEvent = () => {
  store.save({
    jnList: jnLists,
  })
  showModal({
    title: '提示',
    subtitle: `保存成功`,
  })
}
const addEvent = () => {
  getRandomAttrs()
  store.add({
    jnList: jnLists,
  })
  store.index++
}
const clearEvent = () => {
  store.clear({})
  showModal({
    title: '提示',
    subtitle: `清除成功`,
  })
}
const musicEvent = () => {
  var CA = document.getElementById('CA')
  if (bgMusicFlag.value) {
    CA.pause()
  } else {
    CA.play()
  }
  bgMusicFlag.value = !bgMusicFlag.value
}
watch(
  () => store.currentBb,
  (newValue, oldValue) => {
    console.log('...........watch', newValue, oldValue)
    if (store.currentBb?.jnList?.length > 0) {
      jnLists = store.currentBb?.jnList
      const jnLenth = jnLists.filter((e) => e?.des).length
      console.log('技能长度', jnLenth)
      jnLenthRef.value = jnLenth
      controlRenzheng()
    } else {
      getRandomAttrs()
    }
  },
  {
    immediate: true,
  }
)
onMounted(() => {
  console.log(222)
  console.log(store.index)
  console.log(Array.from(store.items))
  console.log(store.currentBb?.jnList)
})
</script>

<style lang="scss" scoped>
@mixin flex-ja-c {
  display: flex;
  justify-content: center;
  align-items: center;
}
.dobooks {
  &-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
  }
  &-left {
    flex: 1;
    padding: 16px;
    box-sizing: border-box;
    &-img {
      width: 100%;
      height: 180px;
      background: #eee;
      border-radius: 10px;
      @include flex-ja-c;
      img {
        width: 160px;
      }
    }
    &-info {
      width: 100%;
      height: 30px;
      margin-top: 16px;
      position: relative;
      display: flex;
      flex-direction: row;
      &-txt {
        width: 70%;
        height: 30px;
        padding-left: 20px;
        background: #b2bada;
        line-height: 30px;
        border-radius: 30px;
        font-size: 16px;
        color: #000;
        text-align: left;
      }
      &-btn {
        width: 60px;
        height: 30px;
        margin-left: 10px;
        line-height: 30px;
        border-radius: 10px;
        background: #304884;
        color: #fff;
        font-size: 16px;
        &:active {
          opacity: 0.5;
        }
      }
    }
    &-attrs {
      width: 100%;
      margin-top: 16px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      &-lib {
        width: 50%;
        text-align: left;
        color: #f8f8f8;
        font-size: 12px;
        margin-top: 6px;
        &.hot {
          color: #c19139;
        }
      }
    }
    &-jn {
      width: 100%;
      margin-top: 16px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      position: relative;
      &-btn {
        width: 60px;
        height: 30px;
        margin-left: 10px;
        line-height: 30px;
        border-radius: 10px;
        background: #304884;
        color: #fff;
        font-size: 16px;
        transform: translate(-10px, 10px);
        position: relative;
        &:active {
          opacity: 0.5;
        }
        &._hot {
          background: #800e2b;
        }
        &.add {
          position: absolute;
          right: -30px;
          top: 20px;
        }
        &.clear {
          position: absolute;
          right: -30px;
          top: 60px;
        }
        &.audio {
          position: absolute;
          right: -30px;
          top: 100px;
        }
      }
      &-lib {
        width: 60px;
        height: 60px;
        border-radius: 4px;
        border: 1px solid #939590;
        margin-right: 4px;
        margin-bottom: 4px;
        img {
          width: 100%;
          height: 100%;
          &.learning {
            box-shadow: 0 0 20px rgb(3, 211, 90);
          }
        }
      }
    }
  }
  &-right {
    flex: 1;
    padding: 16px;
    &-learn {
      width: 100%;
      display: flex;
      // height: 140px;
      background: #0d1b26;
      border-radius: 20px;
      border: 1px solid #f8f8f8;
      padding: 16px;
      &-shoujue {
        width: 80px;
        height: 80px;
        background: #b4bbe0;
        border-radius: 10px;
        img {
          width: 100%;
        }
      }
      &-btn {
        flex: 1;
        margin-left: 10px;
        &-txt {
          color: #b4bbe0;
          font-size: 16px;
          text-align: left;
        }
        &-b {
          width: 80px;
          height: 30px;
          font-size: 16px;
          border-radius: 6px;
          margin-top: 10px;
          background: #800e2b;
          color: #fff;
          @include flex-ja-c;
          &:active {
            opacity: 0.5;
          }
        }
      }
    }
    &-bags {
      width: 100%;
      height: 320px;
      overflow: auto;
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      background: #b4bbe0;
      border-radius: 10px;
      &-lib {
        width: 25%;
        height: 80px;
        position: relative;
        @include flex-ja-c;
        flex-direction: column;

        img {
          width: 70%;
        }
        &-des {
          font-size: 12px;
          margin-top: 4px;
        }
        &::before {
          content: '';
          display: block;
          width: 1px;
          height: 100%;
          background: #333;
          transform: scaleX(0.5);
          position: absolute;
          right: 0;
          top: 0;
        }
        &::after {
          content: '';
          display: block;
          width: 100%;
          height: 1px;
          background: #333;
          transform: scaleY(0.5);
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
    &-des {
      color: #eef217;
      font-size: 18px;
      text-align: left;
      margin-top: 10px;
    }
  }
}
</style>
